<!-- 商品管理 => 商品创建 -->
<template>
  <div>
    <nav>
      <div class="box">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">商城后台</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          <el-breadcrumb-item>创建商品</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </nav>
    <main>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          fixed
          prop="productPicture"
          label="商品图片"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称"
          width="120"
          heigth="1100"
        >
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
        </el-table-column>
        <el-table-column prop="allStock" label="总库存" width="120">
        </el-table-column>
        <el-table-column prop="grossSales" label="总销量" width="120">
        </el-table-column>
        <el-table-column prop="like" label="猜你喜欢" width="120">
          <el-checkbox v-model="checked">喜欢</el-checkbox>
        </el-table-column>
        <el-table-column prop="collect" label="收藏" width="120">
          <el-checkbox v-model="checked">收藏</el-checkbox>
        </el-table-column>
        <el-table-column prop="recommend" label="推荐" width="120">
          <el-tooltip :content="'Switch value: ' + value" placement="top">
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="100"
              inactive-value="0"
            >
            </el-switch>
          </el-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
  data() {
    return {
      value: "100",
      tableData: [
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
        {
          productPicture: "",
          productName: "一加",
          price: 2000,
          allStock: "1000部",
          grossSales: "1000",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
nav {
  display: flex;
  align-items: center;
  height: 50px;
  padding-top: 10px;
}
main {
  width: 85%;
}
footer {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
